<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
    <div id="frameContent" class="content-wrapper" style="margin-left:0px;">
        <!-- 内容头部 /-->
        <section class="content-header">
            <h1>
                系统管理
                <small>模块管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>
        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">模块列表</h3>
                </div>

                <!-- 数据表格 -->
                <div class="box-body">
                    <div class="table-box">
                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建" @click='handleCreate()'><i class="fa fa-file-o"></i> 新建</button>
                                    <button type="button" class="btn btn-default" title="删除" @click='handleDelete()'><i class="fa fa-trash-o"></i> 删除</button>
                                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input type="checkbox" name="selid" onclick="checkAll('id',this)">
                                </th>
                                <th class="sorting">模块名</th>
                                <th class="sorting">类型</th>
                                <th class="sorting">上级模块</th>
                                <th class="sorting">链接</th>
                                <th class="sorting">状态</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in dataList">
                                    <td><input type="checkbox" v-model="checkedItemIds" :value="item.id"/></td>
                                    <td>{{item.name}}</td>
                                    <td>{{item.ctype==0?'主菜单':item.ctype==1?'二级菜单':'其他'}}</td>
                                    <td>{{item.module?item.module.name:""}}</td>
                                    <td>{{item.curl}}</td>
                                    <td>{{item.state==0?'停用':'启用'}}</td>
                                    <th class="text-center">
                                        <button type="button" class="btn bg-olive btn-xs" @click='handleUpdate(item.id)'>编辑</button>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--分页条-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[3,5,8]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>

            </div>
        </section>
        <!--添加弹出框-->
        <el-dialog title="添加模块信息" :visible.sync="dialogFormVisible4Add" @close="resetForm()">
            <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
                <div class="panel panel-default">
                    <div class="panel-heading">模块信息</div>
                        <div class="row data-type" style="margin: 0px">
                            <div class="col-md-2 title">模块名</div>
                            <div class="col-md-4 data">
                                <input type="text" class="form-control" placeholder="模块名" v-model="formData.name">
                            </div>

                            <div class="col-md-2 title">上级模块</div>
                            <div class="col-md-4 data">
                                <select class="form-control" v-model="formData.parentId">
                                    <option v-for="item in moduleList" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-2 title">类型</div>
                            <div class="col-md-4 data">
                                <div class="form-group form-inline">
                                    <div class="radio"><label><input type="radio" v-model="formData.ctype" value="0">主菜单</label></div>
                                    <div class="radio"><label><input type="radio" v-model="formData.ctype" value="1">二级菜单</label></div>
                                    <div class="radio"><label><input type="radio" v-model="formData.ctype" value="2">其他</label></div>
                                </div>
                            </div>

                            <div class="col-md-2 title">状态</div>
                            <div class="col-md-4 data">
                                <div class="form-group form-inline">
                                    <div class="radio"><label><input type="radio" v-model="formData.state" value="0">停用</label></div>
                                    <div class="radio"><label><input type="radio" v-model="formData.state" value="1">启用</label></div>
                                </div>
                            </div>

                            <div class="col-md-2 title">链接</div>
                            <div class="col-md-4 data">
                                <input type="text" class="form-control" placeholder="链接" v-model="formData.curl">
                            </div>

                            <div class="col-md-2 title ">备注</div>
                            <div class="col-md-4 data ">
                                <input type="text" class="form-control" placeholder="备注" v-model="formData.remark">
                            </div>

                        </div>
                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleAdd()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Add=false">返回</button>
                </div>
            </el-form>
        </el-dialog>

        <!--编辑弹出框-->
        <el-dialog title="编辑模块信息" :visible.sync="dialogFormVisible4Edit" @close="resetForm()">
            <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
                <div class="panel panel-default">
                    <div class="panel-heading">模块信息</div>
                    <div class="row data-type" style="margin: 0px">
                        <div class="col-md-2 title">模块名</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" placeholder="模块名" v-model="formData.name">
                        </div>

                        <div class="col-md-2 title">上级模块</div>
                        <div class="col-md-4 data">
                            <select class="form-control" v-model="formData.parentId">
                                <option v-for="item in moduleList" :value="item.id">{{item.name}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 title">类型</div>
                        <div class="col-md-4 data">
                            <div class="form-group form-inline">
                                <div class="radio"><label><input type="radio" v-model="formData.ctype" value="0">主菜单</label></div>
                                <div class="radio"><label><input type="radio" v-model="formData.ctype" value="1">二级菜单</label></div>
                                <div class="radio"><label><input type="radio" v-model="formData.ctype" value="2">其他</label></div>
                            </div>
                        </div>

                        <div class="col-md-2 title">状态</div>
                        <div class="col-md-4 data">
                            <div class="form-group form-inline">
                                <div class="radio"><label><input type="radio" v-model="formData.state" value="0">停用</label></div>
                                <div class="radio"><label><input type="radio" v-model="formData.state" value="1">启用</label></div>
                            </div>
                        </div>

                        <div class="col-md-2 title">链接</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" placeholder="链接" v-model="formData.curl">
                        </div>

                        <div class="col-md-2 title ">备注</div>
                        <div class="col-md-4 data ">
                            <input type="text" class="form-control" placeholder="备注" v-model="formData.remark">
                        </div>

                    </div>
                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleEdit()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Edit=false">返回</button>
                </div>
            </el-form>
        </el-dialog>
    </div>
<script>
    new Vue({
        el:"#frameContent",
        data:{
            checkedItemIds:[], //选中的复选框id们
            dataList: [],//当前页要展示的分页列表数据
            pagination:{
                currentPage:1, //当前页数
                pageSize:5, //每页条数
                total:100 //总条数
            },
            formData: {},//表单数据
            moduleList:[], //所有module列表
            dialogFormVisible4Add: false,//增加表单是否可见
            dialogFormVisible4Edit:false//编辑表单是否可见
        },
        created(){ //vue对象创建完成的回调函数
            this.findByPage()
        },
        methods:{
            //分页查询方法
            findByPage(){

            },
            //重置表单方法
            resetForm(){
                this.formData={};
            },
            //新建方法
            handleCreate(){

            },
            //保存方法
            handleAdd(){

            },
            //修改方法
            handleUpdate(id){

            },
            //编辑方法
            handleEdit(){

            },
            //删除方法
            handleDelete(){

            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.findByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.findByPage();
            }
        }
    });
</script>
</body>
</html>